<template>
  <a-card>
    <div v-if="mod=='normal'">
      <a-space class="operator">
        <a-button @click="add" type="primary" style="margin-bottom:20px;" v-auth="`add`">新建</a-button>
      </a-space>
      <standard-table
        rowKey="id"
        :loading='loading'
        :columns="columns"
        :dataSource="dataSource"
        :expandedRowKeys='expandedRowKeys'
        @clear="onClear"
        @change="onChange"
        :pagination="false"
        @onExpand="onExpand"
      >
        <div slot="status" slot-scope="{record}">
          <div style="display:flex;align-items: center;" >
            <div style="width:6px;height:6px;border-radius:50%;background-color:#ff7875" v-if="record.status==0"></div>
            <div style="width:6px;height:6px;border-radius:50%;background-color:#00cc63" v-else></div>
            <span style="margin-left:5px">{{record.status | setStatus}}</span>
          </div>
        </div>
        <div slot="action" slot-scope="{record}" >
          <a style="margin-right: 8px" @click="edit(record.id)" href="javascript:;" v-auth="`edit`">
            <a-icon type="edit"/>编辑
          </a>
          <a-popconfirm title="确定删除？" ok-text="删除" cancel-text="取消" @confirm='deleteRecord(record.id)' v-auth="`delete`">
            <a href="javascript:;">
              <a-icon type="delete" />删除
            </a>
          </a-popconfirm>
        </div>
      </standard-table>
    </div>
    <div v-if="mod=='add'">
      <listAdd :mod.sync="mod" />
    </div>
    <div v-if="mod=='edit'">
      <listEdit :mod.sync="mod" :id="detail_id"/>
    </div>
  </a-card>
</template>

<script>
import {getAuthPagelist, deletePage} from '@/api/modules/permission'
import StandardTable from '@/components/table/StandardTable'
import {listAdd,listEdit} from './listComponents'

const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
  },
  {
    title: '权限标题',
    dataIndex: 'title',
  },
  {
    title: '路由',
    dataIndex: 'route',
  },
  {
    title: '权限',
    dataIndex: 'operation',
  },
  {
    title: '状态',
    dataIndex: 'status',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '操作',
    scopedSlots: { customRender: 'action' }
  }
]

export default {
  data(){
    return{
      mod:'normal',
      loading:false,
      columns:columns,
      dataSource: [],
      expandedRowKeys:[],
      detail_id:''
    }
  },
  created(){
    this.getList()
  },
  methods:{
    getList(){
      getAuthPagelist({}).then((res) => {
        this.loading = true
        if(res.errcode == 0){
          this.loading = false
          if(res.data.length > 0){
            this.dataSource = res.data.map((e)=>{
              return {
                id: e.id,
                title: e.title,
                route: e.route,
                level: e.level,
                pid: e.pid,
                operation: e.operation,
                status: e.status,
                children: e.child
              }
            })
            console.log(this.dataSource)
          }
        }
      }).catch(()=>{
        this.loading = false
      });
    },
    add(){
      this.mod = 'add'
    },
    edit(id){
      this.mod = 'edit'
      this.detail_id = id
    },
    deleteRecord(id){
      this.loading = true
      deletePage({id}).then(() => {
        this.getList()
      }).catch(()=>{
        this.loading = false
      });
    },
    onExpand(bool, row){
      if(bool){
        this.expandedRowKeys.push(row.id)
      }else{
        let idx = this.expandedRowKeys.findIndex(e=>e == row.id)
        this.expandedRowKeys.splice(idx,1)
      }
    },
    onClear() {
      this.$message.info('您清空了勾选的所有行')
    },
    onChange(e) {
      this.page = e.current
      this.init()
    },
  },
  filters:{
    setStatus(e){
      switch(e){
        case 1: case '1':
          return '有效'
        case 0: case '0':
          return '失效'
      }
    }
  },
  watch:{
    mod(e){
      if(e=='normal'){
        this.getList()
      }
    }
  },
  components:{StandardTable, listAdd, listEdit}
}
</script>

<style lang="less" scoped>

</style>